<template>
  <div class="main">
    <div class="input">
      <span>设备编号：</span>
      <el-input v-model="input" placeholder="请输入内容" style="width:200px" />
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
    </div>
    <div class="list">
      <el-table ref="multipleTable" :data="currentPageRecords" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="index" width="70" label="序号" :index="1 + 10 * (pageIndex - 1)" />
        <el-table-column label="设备编号" width="200" prop="innerCode" />
        <el-table-column prop="typename" label="设备型号" width="200" />
        <el-table-column prop="typeStr" label="详细地址" width="200" />
        <el-table-column prop="typestatus" label="运营状态" width="150" />
        <el-table-column prop="status" label="设备状态" width="250">
          <template>
            <el-tag type="warning">离线</el-tag>
            <el-tag type="success">货道</el-tag>
            <el-tag type="success">传送轴</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClick(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="updown">
      <div>共{{ totalCount }}条记录 第{{ pageIndex }} /{{ totalPage }} 页</div>
      <el-button-group>
        <el-button type="info" :disabled="pageIndex === 1" @click="previous">上一页</el-button>
        <el-button type="info" :disabled="pageIndex === Number(totalPage)" @click="next">下一页 </el-button>
      </el-button-group>
    </div>
    <Equipment :equipmentdialog.sync="equipmentdialog" :count-info="countInfo"/>
  </div>
</template>

<script>
import { vmTypeSearchAPI, vmvmTypeAPI } from '@/api/vm'
import Equipment from './components/Equipment.vue'
export default {
  components: {
    Equipment
  },
  data() {
    return {
      input: '',
      totalCount: '',
      totalPage: '',
      currentPageRecords: [],
      pageIndex: 1,
      pageSize: 10,
      TypeArr: ['未投放', '运营', 0, '撤机'],
      equipmentdialog: false,
      countInfo: {}
    }
  },
  created() {
    this.getVmTypeID()
    this.getvmType()
  },
  methods: {
    search() {
      this.getvmType({
        innerCode: this.input
      })
    },
    async getvmType(params) {
      const { data } = await vmTypeSearchAPI(params)
      console.log(data)
      this.totalPage = data.totalPage
      this.totalCount = data.totalCount
      this.currentPageRecords = data.currentPageRecords
      this.currentPageRecords.forEach(item => {
        const str = item.node.addr.substring(12)
        item.typeStr = str
        item.typestatus = this.TypeArr[item.vmStatus]
        const vmType = item.vmType
        let typename = ''
        this.currentPageRecordsType.forEach(item => {
          if (item.typeId === vmType) {
            typename = item.name
          }
        })
        item.typename = typename
      })
    },
    previous() {
      this.pageIndex = this.pageIndex - 1
      this.getvmType({
        pageIndex: this.pageIndex
      })
    },
    next() {
      this.pageIndex = this.pageIndex + 1
      this.getvmType({
        pageIndex: this.pageIndex
      })
    },
    async getVmTypeID() {
      const res = await vmvmTypeAPI()
      this.currentPageRecordsType = res.data.currentPageRecords
    },
    handleClick(row) {
      this.equipmentdialog = true
      console.log(row)
      this.countInfo = row
    }
  }
}
</script>

<style lang="scss" scoped>
.input {
  width: 100%;
  height: 60px;
  background-color: #fff;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #606266;

  .el-button {
    margin-left: 20px;
  }
}

.list {
  margin: 0 20px;
  background-color: #fff;
  padding: 20px;

  .el-button {
    margin-bottom: 20px;
  }
}

.updown {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
  padding-left: 40px;
  margin-bottom: 40px;

  .el-button-group {
    margin-right: 40px;
  }

  .el-button {
    margin-right: 40px;
  }
}

.el-tag {
  margin-right: 20px;
  border-radius: 14px;
}
</style>
